<template>
    <div>
      <el-card>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">

        <el-form-item label="手机号" prop="zeroPhone">
          <el-input
            v-model="queryParams.zeroPhone"
            placeholder="请输入零元质检手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="零元质检地区" prop="zeroAdder">
          <el-input
            v-model="queryParams.zeroAdder"
            placeholder="请输入零元质检地区"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="分类状态" prop="teamStatus">
          <el-select v-model="queryParams.teamStatus" placeholder="请选择分类状态 1发送 0回拨" clearable size="small">
            <el-option label="发送" value="1" />
            <el-option label="回拨" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <!--<el-col :span="1.5">-->
          <!--<el-button-->
            <!--type="primary"-->
            <!--icon="el-icon-plus"-->
            <!--size="mini"-->
            <!--@click="handleAdd"-->
            <!--v-hasPermi="['zero:service:add']"-->
          <!--&gt;新增</el-button>-->
        <!--</el-col>-->
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['zero:service:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['zero:service:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['zero:service:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="serviceList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="零元质检ID" align="center" prop="zeroId" />
        <el-table-column label="零元质检" align="center" prop="zeroNumber" />
        <el-table-column label="零元质检手机号" align="center" prop="zeroPhone" />
        <el-table-column label="零元质检地区" align="center" prop="zeroAdder" />
        <el-table-column label="用户ID" align="center" prop="customerId" />
        <el-table-column label="分类状态" align="center" prop="teamStatus" >

          <template slot-scope="scope">
            <el-tag
              :type="scope.row.teamStatus === '1' ? 'success' : 'danger'"
              disable-transitions>{{scope.row.teamStatus ==='1' ? '发送' : '拨回'}}</el-tag>
          </template>

        </el-table-column>
        <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['zero:service:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['zero:service:remove']"
            >删除</el-button>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDingDan(scope.row)"
            >查看此用户订单</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改零元质检对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">

          <el-form-item label="分类状态" prop="teamStatus">
            <!--<el-radio-group v-model="form.teamStatus">-->
              <!--<el-radio label="1">请选择字典生成</el-radio>-->
            <!--</el-radio-group>-->
            <el-select v-model="form.teamStatus" placeholder="请选择分类状态 1发送 0回拨" clearable size="small">
              <el-option label="发送" value="1" />
              <el-option label="回拨" value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      </el-card>


      <el-dialog :title="titleorder" :visible.sync="openorder" width="1000px" append-to-body>

        <el-table v-loading="loading" :data="masterList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="订单ID" align="center" prop="orderId" />
          <el-table-column label="订单编号" align="center" prop="orderSn" />
          <el-table-column label="下单人ID" align="center" prop="customerId" />
          <el-table-column label="收货人姓名" align="center" prop="shippingUser" />
          <el-table-column label="收货人电话" align="center" prop="customerPhone" />

          <el-table-column label="地址" align="center" prop="address" />
          <el-table-column label="支付方式" align="center" prop="paymentMethod" >
            <template slot-scope="scope">
              {{scope.row.paymentMethod=='1' ? '支付宝' : scope.row.paymentMethod=='2' ? '微信' : '线下'}}
            </template>
          </el-table-column>
          <el-table-column label="订单金额" align="center" prop="orderMoney" />
          <el-table-column label="优惠金额" align="center" prop="districtMoney" />
          <el-table-column label="运费金额" align="center" prop="shippingMoney" />
          <el-table-column label="支付金额" align="center" prop="paymentMoney" />


          <el-table-column label="订单状态" align="center" prop="orderStatus" >
            <template slot-scope="scope">
              {{scope.row.orderStatus=='1' ? '代付款' : scope.row.orderStatus=='2' ? '代发货' : scope.row.orderStatus=='3' ? '待收货' : scope.row.orderStatus=='4' ? '已收货' : scope.row.orderStatus=='5' ? '交易取消' : scope.row.orderStatus=='6' ? '删除订单' : scope.row.orderStatus=='7' ? '取消订单' : '退货'}}
            </template>
          </el-table-column>
<!--          <el-table-column label="订单积分" align="center" prop="orderPoint" />-->
<!--          <el-table-column label="发票抬头" align="center" prop="invoiceTime" />-->
          <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="100">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="店铺名称" align="center" prop="shopsName" />

        </el-table>

        <pagination
          v-show="totalorder>0"
          :total="totalorder"
          :page.sync="queryParamsorder.pageNum"
          :limit.sync="queryParamsorder.pageSize"
          @pagination="getList"
        />

      </el-dialog>


    </div>
</template>

<script>
    import { orderList,listService, getService, delService, addService, updateService, exportService } from "@/api/super/zero";

    export default {
        name: "zero",
      data() {
        return {
          masterList:[],
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          totalorder: 0,
          // 零元质检表格数据
          serviceList: [],
          // 弹出层标题
          title: "",
          titleorder: "",
          // 是否显示弹出层
          open: false,
          openorder: false,
          // 查询参数
          queryParamsorder:{
            pageNum: 1,
            pageSize: 10,
            orderSn: null,
            customerId: null,
            customerPhone: null,
            shippingUser: null,
            province: null,
            city: null,
            district: null,
            address: null,
            paymentMethod: null,
            orderMoney: null,
            districtMoney: null,
            shippingMoney: null,
            paymentMoney: null,
            shippingCompName: null,
            shippingSn: null,
            shippingTime: null,
            payTime: null,
            receiveTime: null,
            orderStatus: null,
            orderPoint: null,
            invoiceTime: null,
            modifiedTime: null,
            supplierId: null
          },
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            zeroNumber: null,
            zeroPhone: null,
            zeroAdder: null,
            customerId: null,
            teamStatus: null,
            modifiedTime: null
          },
          // 表单参数
          form: {},
          // 表单校验

        };
      },


      created() {
        this.getList();
      },
      methods: {
        handleDingDan(row){
          // alert(row.customerId)
          orderList(row.customerId).then(res=>{
            this.openorder = true;
              this.masterList = res.rows;
          })
        },


        /** 查询零元质检列表 */
        getList() {
          this.loading = true;
          listService(this.queryParams).then(response => {
            this.serviceList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            zeroId: null,
            zeroNumber: null,
            zeroPhone: null,
            zeroAdder: null,
            customerId: null,
            teamStatus: "0",
            modifiedTime: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.zeroId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加零元质检";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset();
          const zeroId = row.zeroId || this.ids
          getService(zeroId).then(response => {
            this.form = response.data;
          this.open = true;
          this.title = "修改零元质检";
        });
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.zeroId != null) {
                updateService(this.form).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
              } else {
                addService(this.form).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
              }
            }
          });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const zeroIds = row.zeroId || this.ids;
          this.$confirm('是否确认删除零元质检编号为"' + zeroIds + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delService(zeroIds);
          }).then(() => {
            this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有零元质检数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportService(queryParams);
          }).then(response => {
            this.download(response.msg);
        }).catch(function() {});
        }
      }

    }
</script>

<style scoped>

</style>
